<template>
  <div class="app-container">
    <div v-show="!visibleDetails">
      <!-- 条件栏 -->
      <page-filter
        v-model:query="filterInfo.query"
        :filter-list="filterInfo.list"
      ></page-filter>
      <!-- 表格 -->
      <table-container
        :refresh="tableInfo.refresh"
        :init-curpage="tableInfo.initCurpage"
        v-model:data="tableInfo.data"
        :api="getCoreCodePage"
        :check-box="false"
        :tab-index="true"
        :query="filterInfo.query"
        :field-list="tableInfo.fieldList"
        :handle="tableInfo.handle"
        @handleEvent="handleEvent"
      >
        <template v-slot:col-name="scope">
          <span class="slip-edit" @click="showDetail(scope.row)">{{
            scope.row.name
          }}</span>
        </template>
      </table-container>
    </div>
    <!-- 新增修改弹窗 -->
    <page-dialog
      v-if="dialogInfo.visible"
      :title="dialogInfo.title[dialogInfo.type]"
      v-model:visible="dialogInfo.visible"
      :width="dialogInfo.width"
      :bt-loading="dialogInfo.btLoading"
      :bt-list="dialogInfo.btList"
    >
      <!-- form -->
      <page-form
        v-if="dialogInfo.visible"
        class="paddingBox order-model-formBox flex_wrap_start_start"
        v-model:ref-obj="formInfo.ref"
        :data="formInfo.data"
        :field-list="formInfo.fieldList"
        :rules="formInfo.rules"
        :label-width="formInfo.labelWidth"
      />
    </page-dialog>
    <coding-details
      v-if="visibleDetails"
      v-model:visible="visibleDetails"
      :id="formInfo.data.id"
      @callback="callbackDetails"
    ></coding-details>
  </div>
</template>

<script setup name="codingManagement">
import {
  getCoreCodePage,
  updateCoreCode,
  addCoreCode,
  coreCodeChangeStatus,
} from '@/api/core.js'
import CodingDetails from './details'
const { proxy } = getCurrentInstance()
// 过滤相关配置
const filterInfo = ref({
  query: {
    sort: 'create_time desc',
  },
  list: [
    {
      type: 'button',
      label: '新增',
      show: proxy.$permission('codingManagement:add'),
      event: create,
    },
    {
      type: 'input',
      label: '名称',
      value: 'nameLike',
      event: search,
    },
    { type: 'button', label: '搜索', event: search },
  ],
})
// 表格相关
const tableInfo = ref({
  refresh: 1,
  initCurpage: 1,
  data: [],
  selections: [],
  fieldList: [
    { label: '编码名称', value: 'name', type: 'slot' },
    { label: '编码类型', value: 'typeValue' },
    { label: '前缀', value: 'prefix' },
    { label: '序列长度', value: 'length' },
    { label: '编号示例', value: 'codeSample' },
    { label: '状态', value: 'statusValue' },
  ],
  handle: {
    fixed: 'right',
    label: '操作',
    width: '90',
    btList: [
      {
        label: '启用',
        event: changeStatus,
        show: proxy.$permission('codingManagement:open'),
        ifRender: function (row) {
          return row.status === 0
        },
      },
      {
        label: '停用',
        event: changeStatus,
        show: proxy.$permission('codingManagement:stop'),
        ifRender: function (row) {
          return row.status === 1
        },
      },
      {
        label: '修改',
        event: update,
        show: proxy.$permission('codingManagement:update'),
        ifRender: function (row) {
          return row.status === 0
        },
      },
    ],
  },
})
// 表单相关
const formInfo = ref({
  ref: null,
  data: {
    name: '',
    type: '',
    prefix: '',
    length: undefined,
    remark: '',
  },
  fieldList: [
    {
      label: '编码名称',
      value: 'name',
      type: 'input',
      maxlength: 8,
    },
    {
      label: '编码类型',
      value: 'type',
      type: 'select-model',
      code: 'code_manage_type',
    },
    { label: '前缀', value: 'prefix', type: 'input', maxlength: 3 },
    {
      label: '序列长度',
      value: 'length',
      type: 'number',
      min: 2,
      max: 15,
    },
    {
      label: '备注',
      value: 'remark',
      type: 'textarea',
    },
  ],
  rules: {
    name: [{ required: true, message: '请输入编码名称', trigger: 'blur' }],
    type: [{ required: true, message: '请选择编码类型', trigger: 'blur' }],
    length: [{ required: true, message: '请输入序列长度', trigger: 'blur' }],
    prefix: [{ validator: proxy.$validate.validatEn, trigger: 'blur' }],
  },
  labelWidth: '100px',
})
// 弹窗相关
const dialogInfo = ref({
  title: {
    create: '添加',
    update: '修改',
  },
  visible: false,
  type: '',
  width: '40%',
  btLoading: false,
  btList: [
    { label: '关闭', type: '', icon: '', event: close, show: true },
    {
      label: '保存',
      type: 'primary',
      icon: '',
      event: save,
      saveLoading: false,
      show: true,
    },
  ],
})
const visibleDetails = ref(false)

const btnOpen = computed(() => {
  if (
    tableInfo.value.selections.length &&
    !tableInfo.value.selections.filter((item) => item.status === 1).length
  ) {
    return false
  }
  return true
})
const btnStop = computed(() => {
  if (
    tableInfo.value.selections.length &&
    !tableInfo.value.selections.filter((item) => item.status === 0).length
  ) {
    return false
  }
  return true
})

onMounted(() => {
  getList()
})
// 获取列表
function getList() {
  tableInfo.value.refresh = Math.random()
}
// 初始化验证
function initRules() {
  formInfo.value.rules = proxy.$initRules(formInfo.value.fieldList)
}
// 搜索
function search() {
  // 重置分页
  tableInfo.value.initCurpage = Math.random()
  tableInfo.value.refresh = Math.random()
}
// 创建
function create() {
  formInfo.value.data = {
    length: 2,
  }
  dialogInfo.value.type = 'create'
  dialogInfo.value.visible = true
}
// 编辑
function update(data) {
  dialogInfo.value.type = 'update'
  dialogInfo.value.visible = true
  // 显示信息
  formInfo.value.data = { ...data }
}
// 启用停用
function changeStatus(row) {
  let status = ''
  if (row.status === 1) {
    status = 0
  } else {
    status = 1
  }
  let data = {
    id: row.id,
    status,
    type: row.type,
  }
  coreCodeChangeStatus(data).then((res) => {
    if (res) {
      getList()
    }
  })
}
function close() {
  dialogInfo.value.visible = false
  formInfo.value.data = {}
}
// 触发事件
function handleEvent(event, data) {
  switch (event) {
    // 对表格获取到的数据做处理
    case 'tableCheck':
      tableInfo.value.selections = data
      break
  }
}
function save() {
  const _dialogInfo = dialogInfo.value
  const _tableInfo = tableInfo.value
  formInfo.value.ref.validate((valid) => {
    if (valid) {
      let api
      const params = formInfo.value.data
      const type = dialogInfo.value.type
      if (type === 'create') {
        api = addCoreCode
      } else if (type === 'update') {
        api = updateCoreCode
      } else {
        return
      }
      _dialogInfo.btLoading = true
      api(params)
        .then((res) => {
          if (res.success) {
            _dialogInfo.visible = false
            _tableInfo.refresh = Math.random()
          }
          _dialogInfo.btLoading = false
        })
        .catch((e) => {
          _dialogInfo.btLoading = false
        })
    }
  })
}
function showDetail(data) {
  formInfo.value.data = { ...data }
  visibleDetails.value = true
}
function callbackDetails(data) {
  if (data === 'edit') {
    visibleDetails.value = false
    dialogInfo.value.visible = true
    dialogInfo.value.type = 'update'
  }
}
</script>

<style scoped></style>
